.pk-container {
    padding: 1rem 1rem 7rem;
    min-height: 100vh;
    box-sizing: border-box;
    background: url("../images/home_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .pk-inner-box {
        height: calc(100vh - 10rem);
        padding: 1rem;
        border-radius: 2.4rem;
        overflow: hidden;
        background: url("../images/pk_inner_bg.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-color: #fff;
        box-shadow: 0 0.2rem 0.6rem 0 #895bc9;

        .top-bar {
            @include flex-center-between();
            height: 3rem;

            .btn {
                height: 2.6rem;
                padding: 0 2rem;
                line-height: 2.6rem;
                border-radius: 2.3rem;
                border: 1px solid $purpleBorder;
                text-align: center;
                font-size: 1rem;
                color: #fff;
                background-color: $purpleBgOne;
            }
            .waiting-time{
                font-size: 1.2rem;
                color: #fff;
            }
        }

        .battle-show {
            @include flex-center-around();
            height: 18rem;
            .pk-icon{
                @include flex-center-center();
                flex-direction: column;
                width: 9rem;
                .passed-time{
                    height: 3rem;
                    font-size: 2.2rem;
                    font-weight: bold;
                    color: #fff;
                }
                .img-icon{
                    margin: .8rem 0;
                    width: 9.6rem;
                    height: 8.4rem;
                }
                .cancel-match-btn{
                    height: 3rem;
                    padding: 0 2rem;
                    border-radius: 1rem;
                    font-size: 1rem;
                    color: #fff;
                    border: 1px solid $purpleBorderThree;
                    background: linear-gradient(to bottom, #d7bdfd 0, #cfadff 10%,#bd8fff 90%, #9d6de4 94%);
                    box-shadow: 0 0 0.6rem 0 rgba(255,255,255,.6);
                    outline: none;
                }
            }
            .grade-box {
                @include flex-center-center();
                height: 2rem;
                line-height: 2rem;
                .img-icon {
                    width: 3rem;
                    height: 3rem
                }

                .grade {
                    padding: 0 .4rem;
                    font-size: 1.2rem;
                    color: #fff;
                }

                .exp {
                    font-size: 1rem;
                    color: #fff;
                }
            }

            .game-player {
                @include flex-center-center();
                flex-direction: column;
                margin-top: .4rem;

                .player-photo {
                    @include flex-center-center();
                    width: 7rem;
                    height: 7rem;
                    border: 2px solid #9363d5;
                    border-radius: 1.6rem;
                    overflow: hidden;
                    background: radial-gradient(circle at center, #f5eeff, #d8c7f1);
                    .word{
                        font-size: 1.2rem;
                        color: $purpleFontOne;
                    }
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .name {
                    height: 3rem;
                    line-height: 3rem;
                    font-size: 1.2rem;
                    font-weight: bold;
                    color: $grayOne;
                }
            }
            // 等待
            &.pk-now{
                .grade-box {
                    .img-icon {
                        width: 2rem;
                        height: 2rem
                    }
    
                    .grade {
                        font-size: 1rem;
                    }
    
                    .exp {
                        display: none;
                    }
                }
            }
        }

        .battle-btns {
            @include flex-center-around();

            .btn {
                @include flex-center-center();
                width: 14rem;
                aspect-ratio: 20 / 7;
                text-align: center;
                line-height: 5rem;
                background: url("../images/battle_btn.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                font-size: 1.7rem;
                font-weight: bold;
                color: #FFF0E2;
                text-shadow: 0 2px 2px #a84f01;
                &.pking{
                    filter: grayscale(1);
                }

                img {
                    width: 3rem;
                    height: 3rem;
                }
            }
        }

        .group-list-box {
            margin-top: 1rem;
            border-radius: 2.4rem;
            background-color: $purpleBgOne;

            .hd {
                position: relative;
                height: 5rem;
                line-height: 5rem;
                text-align: center;
                padding: 0 1.4rem;
                font-size: 1.8rem;
                font-weight: bold;
                border-radius: 2.4rem 2.4rem 0 0;
                color: $purpleFontFour;
                text-shadow: 0 1px 1px #fff;
                background: linear-gradient(to bottom, #faf5ff 0, #e6d5ff 20%, #b78cf6 90%, #a773f3 94%);

                .MuiSvgIcon-root {
                    position: absolute;
                    top: 1rem;
                    right: 1.2rem;
                    font-size: 2.6rem;
                    color: #fff;
                }
            }

            .list-box {
                height: calc(100vh - 43.2rem);
                padding: .6rem 1rem;
                border-radius: 0 0 2.4rem 2.4rem;
                overflow-y: auto;

                .item-box {
                    position: relative;
                    @include flex-center-start();
                    height: 9rem;
                    margin-top: .4rem;
                    border-radius: 2rem;
                    background: linear-gradient(to bottom, #f0e4ff 0, #e3ceff 9%, #e0caff 10%, #b78cf6 90%, #8e64cc 94%);
                    border: 1px solid #b284f5;
                    box-shadow: 0 1px 0.2rem 0 #2d2a32;

                    .select-flag {
                        display: none;
                    }

                    &.select {
                        .select-flag {
                            display: block;
                            position: absolute;
                            top: -1px;
                            left: 1rem;
                            width: 2rem;
                            height: 3rem;
                            line-height: 2rem;
                            text-align: left;
                            margin: auto 0;
                            writing-mode: vertical-lr;
                            text-indent:.5rem;
                            font-size: .7rem;
                            /* 文字从上到下竖排，从右到左 */
                            // transform: rotate(180deg);
                            background: url("../images/select_group.png");
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            color: $yellow;
                        }
                    }

                    .group-box {
                        width: 0;
                        flex: 1;

                        .name-box {
                            @include flex-center-between();
                            padding: 0 1rem 0 4rem;

                            .name {
                                width: 0;
                                flex: 1;
                                font-size: 1.2rem;
                                @include text-ellipsis-single();
                                color: $purpleFontTwo;
                                font-weight: bold;
                            }
                            .prop{
                                @include flex-center-end();
                                img{
                                    margin-right: .2rem;
                                    width: 1.6rem;
                                    height: 1.6rem
                                }
                            }
                        }

                        .list-min-box {
                            ul {
                                @include flex-center-start();
                                padding: 0 .4rem;

                                li {
                                    @include flex-center-center();
                                    margin: .1rem;
                                    flex: 1;
                                    aspect-ratio: 1 / 1;
                                    background: url("../images/pk_min_li1.png");
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;

                                    &.add-box {
                                        background: url("../images/pk_min_li2.png");
                                        background-size: 100% 100%;
                                        background-repeat: no-repeat;
                                    }

                                    img {
                                        margin-bottom: .2rem;
                                        width: 80%;
                                        height: 80%;
                                    }
                                }
                            }

                        }
                    }

                    .current-skill {
                        @include flex-center-center();
                        flex-direction: column;
                        width: 6rem;
                        height: 100%;
                        border-radius: 0 2rem 2rem 0;
                        box-sizing: border-box;
                        border: 1px solid #5cf0ef;
                        background: linear-gradient(to bottom, #e8ffff 0, #abf6f6 9%, #a6f5f4 10%, #6fe9e8 90%, #34cccb 94%);
                        box-shadow: -1px 0px 0.3rem 0 rgba(0, 0, 0, .2);

                        .name {
                            height: 1.4rem;
                            line-height: 1.4rem;
                            font-size: .8rem;
                            color: #067E7D;
                        }

                        .skill-icon {
                            width: 4.6rem;
                            height: 4.6rem;
                            padding: .4rem;
                            border-radius: 1.2rem;
                            box-sizing: border-box;
                            background: linear-gradient(to bottom, #41e1df 0, #34cfcd 59.9%, #119796 50%, #2ec8c7 100%);
                            border: 1px solid #18cbc9;
                            box-shadow: 0 2px 0.2rem 0 #116b6a;

                            img {
                                width: 100%;
                                height: 100%;
                                border-radius: 1.2rem;
                            }
                        }
                    }
                }
            }
        }
    }

}